<div class="row">
  <div class="col-md-6">
    <h1>
      Shows <span class="text-muted text-xs">({{tvShow.total}} items)</span>
      <video-sort-order-dropdown ng-model="tvShow.sorter"  ng-model-options="{getterSetter: true}" dropdown-type="'tvShow'"/>
    </h1>
  </div>

  <div class="col-md-6">
    <br>
    <div class="btn-group pull-right">
      <button class="btn btn-primary" ng-click="createFromFiles()">Bulk-Create from file(s)</button>
      <button class="btn btn-primary " ng-click="openShowModal()">Create new Show</button>
    </div>
  </div>
</div>


<div class="row">
  <div class="col-md-5">
    <input placeholder="{{searchText}}" type="text" ng-model="tvShow.filter.name" ng-change="doSearch(tvShow.filter.name)"
           ng-model-options="{debounce: 333}" class="form-control input-sm" />
  </div>
</div>

<div class="spinner big" ng-show="loading">
  <div class="bounce1"></div>
  <div class="bounce2"></div>
  <div class="bounce3"></div>
</div>

<hr/>

<div class="media-list">
  <div class="media-list-item media-poster-item"  ng-class="{'no-files': !show.episodesWithFilesCount}"
       ng-repeat="show in tvShow.list"
       ui-sref="admin.show({showId: show.id})">
    <div class="media-item" >
      <img ng-if="show.poster_path" ng-src="{{show.poster_path}}"/>
      <img ng-if="!show.poster_path && !show.manualInput" ng-src="{{basePath}}assets/poster-not-found.png"/>

      <img ng-show="show.manualInput && show.poster_image_src" ng-src="{{show.poster_image_src}}">

      <div class="play-text">
        <h4>{{show.name}}</h4>
        <p>{{show.first_air_date}} | <i class="ion-ios-star"></i>{{show.vote_average}} </p>
        <p ng-class="{'label label-danger': !show.episodesWithFilesCount}">{{show.episodesWithFilesCount}}/{{show.episodesCount}} uploaded</p>
      </div>

      <i class="warning-icon ion-alert-circled" ng-show="!show.episodesWithFilesCount"></i>
    </div>
  </div>
</div>

<div class="text-center" ng-if="tvShow.total > tvShow.list.length">
  <button class="btn btn-primary btn-outline" ng-click="tvShow.loadMore()">Load more ...</button>
</div>


<div ng-if="suggestedShows.length">
  <hr>
  <h3>Want to add a new Show?</h3>
  <div class="media-list similar-media">
    <div class="media-list-item" ng-repeat="show in suggestedShows | filter:search | orderBy: '-vote_count'" ng-if="!alreadyAdded(show)">
      <div class="hover-overlay">
        <div>
          <button class="btn btn-primary btn-sm btn-block" ng-click="addFromSuggested(show, true)">Add and Open</button>
          <button class="btn btn-primary btn-sm btn-block" ng-click="addFromSuggested(show, false)">Add and Continue</button>
        </div>
      </div>
      <div class="media-item" >
        <img ng-src="{{show.poster_path}}"/>
      </div>
      <div class="media-meta">Release: {{::show.release_date.substring(0, 4)}} | <i class="ion-ios-star"></i> {{::show.vote_average}}</div>
    </div>
  </div>

</div>
